<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Test Page</title>
<script src="../lib/simple.js"></script>
<head>
<body>
<a href="#"><img src="../simple.png"/></a>
<div id="div1">
<span onclick="$('span[0..9]').css('position:relative').multipleEffect(function (pos) { $(this).css('top', 200 * pos) })">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
<p>
<a href="#hello" title="hello link" class="ca1 ca2" rel="" rel1="3"><b>hello</b> link</a>
<br/>
<span class="c1">span.c1</span>
<a href="#link1">link</a>
</p>
<a href="#link1">link</a>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<a href="#link1">link</a>
<div id="div11" class="c2">
	<div id="div111" class="c3">
		div#id3.c3
		<p>
			<i>i am a bird.</i>
		</p>
		<select name="sel1">
			<option value="option1value">option1</option>
			<option value="option2value">option2</option>
			<option value="option3value">option3</option>
		</select>
		<select name="sel2">
			<option value="option1value">option1</option>
			<option value="option2value">option2</option>
			<option value="option3value">option3</option>
		</select>
		<form name="form1" action="#action" method="get">
			<input type="text" name="action" value="action"/>
			<label>check1<input name="check1" value="checkbox1value" type="checkbox" checked="checked"/></label>
			<label>check2<input name="check2" value="checkbox2value" type="checkbox"/></label>
			<label>radio1<input type="radio" name="radio1" value="radio1value"/></label>
			<label>radio2<input type="radio" name="radio1" value="radio2value"/></label>
			<label>radio3<input type="radio" name="radio1" value="radio3value"/></label>
		</form>
	</div>
	<div id="div112">
		<div id="div1121">
			<b><span>div1121</span></b>
		</div>
	</div>
	<div id="div113"></div>
	<div id="div114"></div>
</div>
<div id="div12">
	<div id="div121"><span><i>div121</i></span></div>
	<div id="div122"><span><b>div122</b></div>
</div>
</div>
<div id="effect" style="width:50px;height:50px;border:1px solid #000;background:#efefef">
</div>
<script>
$(function(){
	console.log('dom ready!');
	$('#effect').html(
		$.map(function (v, p) { return p + ':' + v }, $('#effect').position()).join('')
	);
	$('#effect').css({
		position : 'absolute'
	}).css($('#effect').position()).toggle('click', function (event) {
		$(this).big();	
	}, function (event) {
		$(this).small();
	});
});

$.Effect.extend({
	'small' : {
		reject : 'big',
		render : 	function (pos) {
			$(this).css({
				width : 100 - Math.floor(50 * pos),
				height: 100 - Math.floor(50 * pos)	
			});
		}
	},
	'big' : {
		reject : 'small',
		render : function (pos) {
			$(this).css({
				width : 50 + Math.floor(50 * pos),
				height: 50 + Math.floor(50 * pos)
			});
		}	
	},
	'fadeIn' : {
		onStart : function () { $(this).css('opacity:0.01').show() },
		render : function (pos) { $(this).css('opacity', pos) },
		reject : 'fadeOut'
	},
	'fadeOut' : {
		reject : 'fadeIn',
		render : function (pos) {
			$(this).css('opacity', pos);
		},
		transition: 'reverse',
		onFinish : function () { $(this).hide() }			
	}	
});
$(':header').method('click', function () { $(this).fadeOut() });

$(document).keydown(function (event) {
	console.log(event.which);	
});
/*	
$.extend($.Event.Methods, {
 	isLeftClick:   function() { return this.which === 1 },
	isMiddleClick: function() { return this.which === 2 },
	isRightClick:  function() { return this.which === 3 }
});

$(document).mousedown(function (event) {
	switch (true) {
		case event.isLeftClick() :
			alert('left click');
			break;
		case event.isMiddleClick() :
			alert('middle click');
			break;
		case event.isRightClick() :
			alert('right click');
			break;
	}
});*/
</script>
</body>
</html>
